<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="images/favicon.ico" rel="shortcut icon" />

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/home.css">

    <style>
        .font {
            color: red;
        }

        .btn-hover {
            background-color: #ef4238;
            color: white !important;
        }
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body>
    <!-- 导航栏部分 -->
    <div class="head">
        <div class="head-inner">
            <div class="logo"><img src="images/logo.jpg">阿里迪里影院</div>

            <div class="nav">
                <ul class="navbar">
                    <li><a class="shouye" href="home_index.html">首页</a></li>
                    <li><a href="home_filmType.html">电影</a></li>
                    <li><a href="https://maoyan.com/cinemas">影院</a></li>
                    <li><a href="http://www.gewara.com/">演出</a></li>
                    <li><a href="https://maoyan.com/board">榜单</a></li>
                    <li><a href="https://maoyan.com/news">热点</a></li>
                    <li><a href="https://maoyan.com/edimall">商城</a></li>
                </ul>
            </div>

            <form>
                <input type="text" id="cond" required placeholder="找影片、 影剧" class="search">
                <input class="sub" type="button" title="点击可搜索你喜爱的电影哦。" id="commit">
            </form>

            <div class="user-info">
                <ul class="layui-nav layui-layout-right" style="background-color:#fff;">
                    <li class="layui-nav-item"><a href="javascript:;">
                            <img id="pic" class="layui-nav-img"></a>
                        <dl class="layui-nav-child">
                            <dd id="h1" class="subMenu">
                                <a href="home_myOrder.html">我的订单</a>
                            </dd>
                            <dd id="h2" class="subMenu">
                                <a href="home_information.html">个人中心</a>
                            </dd>
                            <dd id="h3" class="subMenu">
                                <a id="logout">退出登录</a>
                            </dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>


    <!--主题部分-->
    <div id="film-info" v-cloak>

        <div class="banner">
            <div class="banner-wrapper">
                <div class="wrapper-left">
                    <div class="show-img">
                        <img v-bind:src="'../images/'+currentFilm.filmPicture">
                    </div>
                </div>

                <div class="wrapper-right">
                    <div class="wrapper-right-one">
                        <h1 class="name">{{currentFilm.filmName}}</h1>
                        <ul>
                            <li>{{currentFilm.filmType}}</li>
                            <li>{{currentFilm.filmCountry}} / {{currentFilm.filmLong}}分钟</li>
                            <li>{{currentFilm.filmYear}}上映</li>
                        </ul>
                    </div>

                    <div class="wrapper-right-two">
                        <div class="active-one">评分&nbsp;&nbsp;&nbsp;<div id="xx"></div>
                        </div>

                        <!-- 取消双击选中文字 -->
                        <!-- user-select:none; 属性 -->
                        <div id="active-two" @click="change" style="user-select:none;">
                            <i class="layui-icon layui-icon-heart" id="want-one"></i>&nbsp;&nbsp;<span
                                id="want-two">想看</span>
                        </div>

                    </div>

                    <div class="wrapper-right-three">
                        剧情简介：<p>{{currentFilm.filmDesc}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="movie-info">
                <div>
                    <h2 class="movie-name">{{currentFilm.filmName}}</h2>
                    <span class="score_wish">325486</span><span class="score_two">人想看</span>
                </div>
                <div class="movie-desc">
                    <div>
                        <span class="key">时长：</span>
                        <span>{{currentFilm.filmLong}}分钟</span>
                    </div>
                    <div>
                        <span class="key">语言：</span>
                        <span>{{currentFilm.filmLanguage}}</span>
                    </div>
                    <div>
                        <span class="key">导演：</span>
                        <span>{{currentFilm.filmDirector}}</span>
                    </div>
                </div>
            </div>

            <div class="show-date" v-if="currentFilm.filmStatus==1">
                <span>观影时间：</span>
                <a class="btn" v-for="(s,i) in shows" :class="{'btn-hover':i==0}"
                    @click="changeColor(i,$event)">{{s[0].showDate}}</a>
            </div>

            <div v-if="currentFilm.filmStatus==1">
                <table class="tbl">
                    <thead>
                        <tr>
                            <th>放映时间</th>
                            <th>语言版本</th>
                            <th>放映厅</th>
                            <th>售价（元）</th>
                            <th>选座购票</th>
                        </tr>
                    </thead>

                    <tbody>

                        <tr v-for="(f,i) in currentShows" :class="{even:i%2!=0}">
                            <td>
                                <span class="begin-time">{{f.startTime}}</span><br>
                                <span class="end-time">{{f.endTime}}散场</span>
                            </td>

                            <td>
                                <span class="lang">{{currentFilm.filmLanguage}}</span>
                            </td>
                            <td>
                                <span class="lang">{{f.hallName}}</span>
                            </td>
                            <td>
                                <span class="fuhao">￥</span><span class="shuzi">{{f.price}}</span>
                            </td>
                            <td>
                                <a @click="chooseSeat(f.showId)" class="btn-goupiao" title="点击购票哦。">选座购票</a>
                            </td>
                        </tr>

                        <tr v-if="currentShows==null || currentShows.length==0">
                            <td colspan="5">
                                <span class="not-img"></span>
                                <span class="not-title">当前场次已放映完</span>
                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>
            <div v-if="currentFilm.filmStatus==0" style="text-align: center;">
                <span class="not-img"></span>
                <span class="not-title">该影片还未上映呢</span>
            </div>
        </div>

        <div class="module">
            <div class="mod-title">
                <span></span>
                <h2>热门短评</h2>
                <a @click="writeComment">我的短评</a>
            </div>

            <div class="mod-content">
                <div class="comment-list">
                    <ul>
                        <li class="comment-container" v-for="(c,i) in currentFilmComment">
                            <div class="portrait-container">
                                <div class="portrait">
                                    <img v-bind:src="'images/'+c.image">
                                </div>
                                <i class="vv"></i>
                            </div>
                            <div class="comment-value">
                                <div class="main-header">
                                    <div class="comment-user">
                                        <span class="name2">{{c.userName}}</span>
                                        <span class="tag">会</span>
                                    </div>
                                    <div class="comment-time">
                                        <span>{{c.commentTime}}</span>
                                    </div>
                                </div>
                                <div class="main-content">
                                    {{c.content}}
                                </div>
                            </div>
                        </li>

                        <div v-if="currentFilmComment.length==0 ||　currentFilmComment==null" style="text-align: center;">
                            <span class="not-img"></span>
                            <span class="not-title">该影片暂无评论</span>
                        </div>

                    </ul>
                </div>
            </div>
        </div>

        <div id="comment-form" style="display: none;">
            <textarea id="comment-val" required lay-verify="required" placeholder="快来说说你的看法吧" class="layui-textarea" style="width: 500px;height: 300px;margin: 25px auto;"></textarea>
        </div>
    </div>



    <!--底部版块部分-->
    <div class="footer">
        <p>
            关于阿里迪里：
            <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">管理团队</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="#">投资者关系</a>&nbsp;&nbsp;&nbsp;&nbsp;
            友情链接：
            <a href="https://maoyan.com/films">猫眼电影</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/cinemas">猫眼影院</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/edimall">猫眼商城</a>
        </p>

        <p>
            商务合作邮箱：alidli@qq.com &nbsp;&nbsp;|&nbsp;&nbsp;客服电话：10104422
        </p>

        <p>
            Copyright &copy; 2020 - {{nowYear}} 版权所有| by<a href="http://www.gd-nf.com.cn/"> gd-nf</a>
        </p>

        <p>
            &copy;2020 阿里迪里影视 alidli.com
        </p>

        <div class="footer-end">
            <img src="images/bankuai1.png"><img src="images/bankuai2.png"><img src="images/bankuai3.png">
        </div>

    </div>



    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/home-filmInfo.js"></script>
    <script src="js/home-same.js"></script>
    <script>
        //评分
        layui.use(['rate'], function () {
            var rate = layui.rate;
            //半星效果
            rate.render({
                elem: '#xx'
                , value: 3 //初始值
                , half: true //开启半星
                , text: true //开启文本
                , value: 10    //初始值
                , readonly: false  //是否只读
                , setText: function (value) { //自定义文本的回调
                    var arrs = {
                        '0.5': '1分',
                        '1': '2分',
                        '1.5': '3分',
                        '2': '4分',
                        '2.5': '5分',
                        '3': '6分',
                        '3.5': '7分',
                        '4': '8分',
                        '4.5': '9分',
                        '5': '10分',
                    };
                    this.span.text(arrs[value] || (value + "分"));
                }
                , choose: function (value) {
                    if (value == 5) {
                        layer.msg('10分，完美！');
                    }
                    if (value == 4.5) {
                        layer.msg('9分，棒极了！');
                    }
                    if (value == 4) {
                        layer.msg('8分，比较好');
                    }
                    if (value == 3.5) {
                        layer.msg('7分，比较好');
                    }
                    if (value == 3) {
                        layer.msg('6分，一般般');
                    }
                    if (value == 2.5) {
                        layer.msg('5分，一般般');
                    }
                    if (value == 2) {
                        layer.msg('4分，比较差');
                    }
                    if (value == 1.5) {
                        layer.msg('3分，比较差');
                    }
                    if (value == 1) {
                        layer.msg('2分，超烂啊');
                    }
                    if (value == 0.5) {
                        layer.msg('1分，超烂啊');
                    }
                }
            })
        });

    </script>
</body>
</html>